<template>
  <view class="content">
    <view class="content-top">
      <view class="content-input">
        <image src="../../static/serach.png" />
        <input
          :value="searchText"
          placeholder="输入搜索信息"
          confirm-type="search"
          :adjust-position="false"
          auto-blur
          placeholder-style="font-size: 28rpx; font-weight: 500; color: #C6C7CB;"
          @confirm="handleSearch"
          @blur="handleBlur"
          @focus="handleFocus"
        />
        <uni-icons
          v-if="searchText"
          type="close"
          color="#999"
          size="24"
          @click="handleClear"
        />
      </view>
      <view class="content-work" v-if="!searchText && !isFocus">
        <view
          v-for="(item, index) in tabList"
          :key="index"
          class="content-work-item"
          :class="{ active: status === item.id }"
          @click="changeStatus(item.id)"
        >
          {{ item.title }}
        </view>
      </view>
    </view>
    <view class="content-bottom">
      <view v-for="item in dataList" :key="item.id" class="content-item">
        <view class="item-row">
          <view class="item-label">ID</view>
          <view class="item-value"> {{ item.id || "" }} </view>
        </view>
        <view v-if="item.equipment" class="item-row">
          <view class="item-label">名称</view>
          <view class="item-value"> {{ item.equipment.name || "" }} </view>
        </view>
        <view class="item-row">
          <view class="item-label">医院名称</view>
          <view class="item-value"> {{ item.hospital_name || "" }} </view>
        </view>
        <view class="item-row">
          <view class="item-label">科室</view>
          <view class="item-value"> {{ item.department_name || "" }} </view>
        </view>
        <view v-if="item.equipment" class="item-row">
          <view class="item-label">型号</view>
          <view class="item-value"> {{ item.equipment.marking || "" }} </view>
        </view>
        <view v-if="item.equipment" class="item-row">
          <view class="item-label">序列号</view>
          <view class="item-value"> {{ item.equipment.serial || "" }} </view>
        </view>
        <view v-if="item.equipment" class="item-row">
          <view class="item-label">软件版本</view>
          <view class="item-value"> {{ item.equipment.software_version || "" }} </view>
        </view>
        <view v-if="item.equipment && item.equipment.enclosure" class="item-row">
          <view class="item-label">附件</view>
          <view class="item-value"> {{ item.equipment.enclosure || "" }} </view>
        </view>
        <view class="item-row">
          <view class="item-label">状态</view>
          <view class="item-value">
            <view v-if="item.status === '0'" class="status status1">待处理</view>
            <view v-if="item.status === '1'" class="status status2">已处理</view>
            <view v-if="item.status === '2'" class="status status3">处理中</view>
          </view>
        </view>
        <view class="item-row">
          <view class="item-label">联系人</view>
          <view class="item-value"> {{ item.contacts || "" }} </view>
        </view>
        <view class="item-row">
          <view class="item-label">联系电话</view>
          <view class="item-value"> {{ item.contacts_mobile || "" }} </view>
        </view>
        <view class="item-row">
          <view class="item-label">创建时间</view>
          <view class="item-value"> {{ formatTime(item.createtime) }} </view>
        </view>
        <view class="item-row">
          <view class="item-label">问题描述</view>
          <view class="item-value"> {{ item.problem || "" }} </view>
        </view>
        <view v-if="item.images" class="item-image">
          <image
            v-for="(url, index) in item.images"
            :key="index"
            :src="url"
            mode="scaleToFill"
            @click="handlePreview(url, item.images)"
          />
        </view>
        <view v-if="item.status !== '1'" class="item-row">
          <view class="item-label">操作</view>
          <view class="item-value">
            <button
              v-if="item.status === '0'"
              plain
              type="primary"
              size="mini"
              @click="handleStatus(item.id, '2')"
            >
              已派单
            </button>
            <button
              v-if="item.status === '2'"
              plain
              type="primary"
              size="mini"
              @click="handleStatus(item.id, '1')"
            >
              已完成
            </button>
          </view>
        </view>
      </view>
    </view>
    <uni-load-more v-if="!isFocus" :status="loadMore" />
  </view>
</template>
<script>
import throttle from "../../utils/tampToTime";
export default {
  data() {
    return {
      searchText: "", // 搜索内容
      isFocus: false, // 是否聚焦
      page: 1, // 页数
      total: 0, // 总条数
      status: "0", // 故障状态
      lastStatus: "0", // 搜索前故障状态
      loadMore: "more", // 加载状态
      tabList: [
        { id: "0", title: "待处理" },
        { id: "1", title: "已处理" },
        { id: "2", title: "处理中" },
        { id: "", title: "全部" },
      ],
      dataList: [],
    };
  },
  onLoad() {
    this.getList();
  },
  onReachBottom() {
    if (this.loadMore === "more") {
      this.page++;
      this.getList();
    }
  },
  methods: {
    // 搜索
    handleSearch({ detail }) {
      this.searchText = detail.value;
      this.page = 1;
      this.status = detail.value ? "" : this.lastStatus;
      throttle(() => {
        this.getList();
      }, 1000);
    },
    // 获取焦点
    handleFocus() {
      this.isFocus = true;
      this.dataList = [];
    },
    // 失去焦点
    handleBlur() {
      this.isFocus = false;
      if (this.loadMore === "loading") return;
      this.getList();
    },
    // 清空搜索
    handleClear() {
      this.searchText = "";
      this.page = 1;
      this.status = this.lastStatus;
      this.getList();
    },
    // 切换状态
    changeStatus(id) {
      this.status = id;
      this.lastStatus = id;
      this.page = 1;
      this.getList();
    },
    // 预览图片
    handlePreview(url, urls) {
      uni.previewImage({
        current: url,
        urls: urls,
      });
    },
    // 获取数据
    getList() {
      this.loadMore = "loading";
      this.$https
        .get("/fault/list", {
          name: this.searchText,
          page: this.page,
          status: this.status,
        })
        .then((res) => {
          let list = res.data.data || [];
          list.forEach((i) => {
            i.images = i.images ? i.images.split(",") : [];
          });
          this.dataList = this.page === 1 ? list : this.dataList.concat(list);
          this.total = res.data.total;
          this.changeLoadStratus();
        })
        .catch(() => {
          this.changeLoadStratus();
        });
    },
    // 改变加载状态
    changeLoadStratus() {
      if (this.dataList.length >= this.total) {
        this.loadMore = "noMore";
      } else {
        this.loadMore = "more";
      }
    },
    // 处理故障单
    handleStatus(id, status) {
      uni.showModal({
        title: "提示",
        content: `确认该故障单${status === "1" ? "已派单" : "已完成"}？`,
        success: (res) => {
          if (res.confirm) {
            this.$https.get("/fault/update_status", { id, status }).then((res) => {
              uni.showToast({
                title: "操作成功",
                icon: "success",
                duration: 1500,
                success: () => {
                  setTimeout(() => {
                    this.getList();
                  }, 1500);
                },
              });
            });
          }
        },
      });
    },
    // 格式化日期
    formatTime(time) {
      if (!time) return "";
      let date = new Date(time * 1000);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let i = date.getMinutes();
      i = i < 10 ? "0" + i : i;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + m + "-" + d + " " + h + ":" + i + ":" + s;
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  min-height: 100vh;
  &-top {
    background-color: #fff;
    padding: 10rpx 32rpx;
    position: sticky;
    /* #ifdef MP-WEIXIN || APP-PLUS */
    top: 0;
    /* #endif */
    /* #ifdef H5 */
    top: 86rpx;
    /* #endif */
    z-index: 9;
    border-bottom: 1rpx solid #f0f0f0;
  }
  &-input {
    display: flex;
    align-items: center;
    height: 80rpx;
    background: #f6f6fb;
    border-radius: 44rpx;
    margin-top: 20rpx;
    padding: 0 24rpx;
    image {
      width: 36rpx;
      height: 36rpx;
      margin-right: 34rpx;
    }
    input {
      flex: 1;
    }
  }
  &-work {
    display: flex;
    padding: 20rpx 0;
    justify-content: space-between;
    &-item {
      text-align: center;
      flex: 1;
      font-size: 28rpx;
      font-weight: 400;
      color: #969699;
      line-height: 48rpx;
    }
    .active {
      font-size: 36rpx;
      font-weight: 550;
      color: #141414;
      line-height: 48rpx;
      position: relative;
      &::before {
        content: "";
        width: 60rpx;
        height: 8rpx;
        border-radius: 8rpx;
        background-color: $public-oclor;
        position: absolute;
        bottom: -16rpx;
        left: 50%;
        margin-left: -30rpx;
      }
      &::after {
        content: "";
        width: 8rpx;
        height: 8rpx;
        border-radius: 50%;
        background-color: $public-oclor;
        position: absolute;
        bottom: -16rpx;
        left: 50%;
        margin-left: -40rpx;
      }
    }
  }
  &-bottom {
    padding: 0 32rpx;
  }
  &-item {
    background-color: #ffffff;
    box-shadow: 0 0 10rpx rgb(229, 239, 243);
    border-radius: 20rpx;
    margin-top: 20rpx;
    padding: 20rpx;
    color: #141414;
    .item-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10rpx 0;
      font-size: 28rpx;
      .item-label {
        width: 140rpx;
      }
      .item-value {
        flex: 1;
        text-align: right;
        color: #666666;
        .status {
          display: inline-block;
          padding: 10rpx 20rpx;
          border-radius: 40rpx;
          color: #56582c;
          font-size: 26rpx;
        }
        .status1 {
          background-color: rgba(230, 162, 60, 0.5);
        }
        .status2 {
          background-color: rgba(103, 194, 58, 0.5);
        }
        .status3 {
          background-color: rgba(64, 160, 255, 0.5);
        }
      }
    }
    .item-image {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 10rpx 0;
      font-size: 28rpx;
      image {
        width: 150rpx;
        height: 150rpx;
        border-radius: 20rpx;
        margin-right: 10rpx;
        margin-bottom: 10rpx;
      }
    }
  }
}
</style>
